﻿import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import FilUI

Page {
    id: control

    default property alias content              : d.children
    property alias currentIndex                 : nav_list.currentIndex
    property color textHighlightColor           : FilColors.Black
    property color textNormalColor              : FilColors.Grey120
    property color textHoverColor               : FilColors.Grey150
    property int textSpacing                    : 10
    property int headerSpacing                  : 20
    property int headerHeight                   : 40

    QtObject {
        id: d
        default property list<QtObject> children
        property int tabY                       : control.headerHeight / 2 + control.font.pixelSize / 2 + 3

    }

    width                                       : 400
    height                                      : 300
    font                                        : FilTextStyle.Title
    implicitHeight                              : height
    implicitWidth                               : width

    background                                  : Item { }
    header                                      : ListView {
        id: nav_list
        implicitHeight                          : control.headerHeight
        implicitWidth                           : control.width
        model                                   : d.children
        spacing                                 : control.headerSpacing
        interactive                             : false
        orientation                             : ListView.Horizontal
        highlightMoveDuration                   : FilTheme.animationEnabled ? 167 : 0
        highlightResizeDuration                 : FilTheme.animationEnabled ? 167 : 0
        highlight                               : Item {
            clip                                : true
            Rectangle {
                height                          : 3
                radius                          : 1.5
                color                           : FilTheme.primaryColor
                width                           : nav_list.currentItem.width
                y                               : d.tabY
            }
        }
        delegate                                : Button{
            id: item_button
            width                               : item_title.width
            height                              : nav_list.height
            focusPolicy                         : Qt.TabFocus
            background                          : Item {
                FilFocusRectangle {
                    anchors.margins             : -4
                    visible                     : item_button.activeFocus
                    radius                      : 4
                }
            }
            contentItem: Item {
                FilText {
                    id: item_title
                    text                        : modelData.title
                    anchors.centerIn            : parent
                    font                        : control.font
                    color                       : {
                        if (nav_list.currentIndex === index) {
                            return textHighlightColor;
                        }
                        if (item_button.hovered) {
                            return textHoverColor;
                        }
                        return textNormalColor;
                    }
                }
            }
            onClicked: {
                nav_list.currentIndex = index
            }
        }
    }
    Item {
        id: container
        anchors.fill                            : parent
        Repeater {
            model                               : d.children
            Loader {
                property var argument           : modelData.argument
                anchors.fill                    : parent
                sourceComponent                 : modelData.contentItem
                visible                         : nav_list.currentIndex === index
            }
        }
    }

}
